<template>
  <div id="home">
{{tryfor}}
  <NavBar>
    <div slot="center">论坛</div>
  </NavBar>
  <div class="interval"></div>
<!--    <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />-->
<!--    <van-uploader :after-read="afterRead" />-->
<!--    帖子分类栏-->
<!--    <article_item></article_item>-->
<articletype :info='Typelist'></articletype>
     <div class="interval"></div>
<van-tabs v-model="active" sticky class="sticky_try">
<!--  <van-tab v-for="item in tablist" :title="item.name" :key="tablist.id" >-->
<!--   <ArticleItem :ordering="active"></ArticleItem>-->
<!--  </van-tab>-->
    <van-tab title="近期热帖">
         <ArticleItem ordering="read_num"></ArticleItem>
    </van-tab>
  <van-tab title="最新话题">
         <ArticleItem ordering="create_time"></ArticleItem>
  </van-tab>
  <van-tab title="精华推荐">
    <ArticleItem ordering="like_num"></ArticleItem>
  </van-tab>
  <van-tab title="最多评论">
      <ArticleItem ordering="comment_num"></ArticleItem>
  </van-tab>
</van-tabs>
    <div class="item11" style="" @click="postforum">
<!--      <img src="../../assets/img/common/fabiao.png">-->
      <span class="my-icon">&#xe77a;</span>
      <span class="name">发帖</span>
     </div>
    </div>
</template>

<script>

import NavBar from "@/components/common/NavBar/NavBar";
import {postimg} from "@/network/Users/uoloadimg";
import {getType} from "@/network/Users/Type";
import articletype from "@/views/Article/articletype";
import ArticleItem from "@/views/Article/ArticleItem";


export default {
name: "Home",
  components:{
    ArticleItem,
  NavBar,
    articletype
  },
  // props:{
  // 'info':{
  //   type:Object,
  //   default:[]
  // }
  // },
  computed:{
  tryfor(){
    for(let i in this.book){
      console.log(i);
    }
  }
  },
  data(){
  return{
       scrollNum: 0, //滚动距离
      isTop: false, //是否显示回到顶部按钮
      myTimer: -1, //防止点击事件过度
    book:[{
      id:1,
      name:'小高'
    },
      {
        id:2,
        name:'小陈'
      }],
    tablist:[{
      'id':0,
      'name':'近期热帖',
    },{
      'id':1,
      'name':'最新话题'
    },{
      'id':2,
      'name':'精华推荐'
    },{
      'id':3,
      'name':'我参与的'
    }],
    fileList:[],
    Typelist:[],
    active:1
  }
  },
  mounted() {
     window.addEventListener("scroll", () => {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      this.scrollNum = top;
      if (top >= 100) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    });

  },
  methods:{

  postforum(){
    this.$router.push('/article/post')
  },
  changeorder(item){
    console.log(item);
  }

  },
  created() {
  this.$emit('header',true)
  getType().then(
      res=>{
        this.Typelist=res.type
      }
  )
  },
  watch:{
    scrollNum(newVal,oldVal){
      if (newVal>=276){
        this.$emit('header',false)
      }
      else {
         this.$emit('header',true)
      }
    }
  }

}
</script>

<style scoped>
#home{
    background-color: rgb(247,248,250);
  height: 2000px;
}
.interval{
  height: 10px;
}
.sticky_try{
  height: 200%;
}
.item11{
display: block;
height: 50px;
position: fixed;
background-color: hsla(0,0%,100%,.9);
border-radius: 22px;
text-align: center;
font-size: 10px;
margin-bottom: 12px;
width: 50px;
background: #1CB194;
right: 25px;
bottom: 105px;
  cursor: pointer;
}
.item11 .name{
  display: block;
  color: wheat;
}
/*@font-face {*/
/*  font-family: 'my-icon';*/
/*  src: url('./my-icon.ttf') format('truetype');*/
/*}*/

/*.my-icon {*/
/*  font-family: 'my-icon';*/
/*}*/

/*.my-icon-extra::before {*/
/*  content: '\e626';*/
/*}*/
@font-face {
  font-family: 'my-icon';

  src: url('//at.alicdn.com/t/font_3196381_4sxv4wlj5t.woff2?t=1647150802903') format('woff2'),
       url('//at.alicdn.com/t/font_3196381_4sxv4wlj5t.woff?t=1647150802903') format('woff'),
       url('//at.alicdn.com/t/font_3196381_4sxv4wlj5t.ttf?t=1647150802903') format('truetype');
}
.my-icon {
  font-family: "my-icon" !important;
  font-size: 32px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: wheat;
}
</style>